{% import 'components/StackedList/StackedListItem.html' as StackedListItem %}

{% macro render(id) %}
  <section id="{{ id }}" class="{{ id }}">
    <article class="StackedListWrapper StackedListWrapper--hasScrollIndicator">
      <header class="StackedListHeader">
        <h3 class="Heading Heading--size3 Heading--colorWhite">Simple list</h3>
      </header>

      <ul class="StackedList StackedList--hasScroll">
        {{ StackedListItem.render('item one',    {index: 1, draggable: true}) }}
        {{ StackedListItem.render('item two',    {index: 2, draggable: true}) }}
        {{ StackedListItem.render('item three',  {index: 3, draggable: true}) }}
        {{ StackedListItem.render('item four',   {index: 4, draggable: true}) }}
        {{ StackedListItem.render('item five',   {index: 5}) }}
        {{ StackedListItem.render('item six',    {index: 6, draggable: true}) }}
        {{ StackedListItem.render('item seven',  {index: 7, draggable: true}) }}
        {{ StackedListItem.render('item eight',  {index: 8}) }}
        {{ StackedListItem.render('item nine',   {index: 9}) }}
        {{ StackedListItem.render('item ten',    {index: 10, draggable: true}) }}
        {{ StackedListItem.render('item eleven', {index: 11}) }}
        {{ StackedListItem.render('item twelve', {index: 12, draggable: true}) }}
      </ul>
    </article>
  </section>
{% endmacro %}
